<template>
	<!-- 预览界面 -->
	<el-dialog :title="preview.title" fullscreen v-model="visible" width="80%" top="5vh" append-to-body class="scrollbar">
		<el-tabs v-model="preview.activeName">
			<el-tab-pane v-for="(value, key) in preview.data"
				:label="key.substring(key.lastIndexOf('/')+1,key.indexOf('.vm'))"
				:name="key.substring(key.lastIndexOf('/')+1,key.indexOf('.vm'))" :key="key">
				<el-link :underline="false" icon="DocumentCopy" v-copyText="value" v-copyText:callback="copyTextSuccess" style="float:right;position: absolute;right: 10px;top:10px;">&nbsp;复制</el-link>
				<highlightjs :code="value"></highlightjs>
			</el-tab-pane>
		</el-tabs>
	</el-dialog>
</template>

<script>
	export default {
		data() {
			return {
				// 遮罩层
				visible: false,
				// 预览参数
				preview: {
					open: false,
					title: "代码预览",
					data: {},
					activeName: ""
				}
			};
		},
		methods: {
			// 显示弹框
			show(params) {
				this.visible = true;
				this.appGenTablePreviewByTableId(params.tableId);
			},
			// 查询表数据
			appGenTablePreviewByTableId(tableId) {
				this.$api.appGenTablePreviewByTableId(tableId).then(data => {
					this.preview.data = data;
					this.preview.activeName = "Entity.java";
				});
			},
			/** 高亮显示 */
			highlightedCode(code, key) {
			  const vmName = key.substring(key.lastIndexOf("/") + 1, key.indexOf(".vm"));
			  var language = vmName.substring(vmName.indexOf(".") + 1, vmName.length);
			  const result = hljs.highlight(language, code || "", true);
			  return result.value || '&nbsp;';
			},
			/** 复制代码成功 */
			copyTextSuccess() {
				console.log("复制成功");
			  this.$common.msgBoxSuccess("复制成功");
			},
		}
	};
</script>
